<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>record列表</title>
    <link rel="stylesheet" href="../static/js/layui/css/layui.css" th:href="@{/js/layui/css/layui.css}" media="all">
    <script src="../static/js/layui/layui.js" th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
</head>

<body style="padding: 20px;">
<!-- 页面结构 -->
<div class="layui-main" style="width: auto">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">现金券充值记录</blockquote>
    <!-- 添加按钮 -->
    <a class="layui-btn layui-btn-sm" id="add-user-btn" style="margin-right: 15px">添加记录</a>
        单位名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="dname" autocomplete="off">
        </div>
        <button class="layui-btn" id="ss" data-type="reload">搜索</button>
    <!-- 用户表 -->
    <table id="user-tbl" lay-filter="user-tbl"></table>
    <script type="text/html" id="user-tbl-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="updateUser">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteUser">删除</a>
    </script>
</div>

<!-- 添加用户弹出层 -->
<div id="add-user-layer" style="display: none; padding: 20px">
    <form id="add-user-form" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">充值时间</label>
            <div class="layui-input-block">
                <input class="layui-input" name="pptime" id="test1" type="text" placeholder="选择日期">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单位名称</label>
            <div class="layui-input-block">
                <input type="text" name="unitname" class="layui-input" lay-verify="required" utocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">充值金额</label>
            <div class="layui-input-block">
                <input type="text" name="sum" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-user-form-submit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 更新用户弹出层 -->
<div id="update-user-layer" style="display: none; padding: 20px">
    <form id="update-user-form" class="layui-form layui-form-pane" lay-filter="update-user-form">
        <div class="layui-form-item">
            <label class="layui-form-label">充值时间</label>
            <div class="layui-input-block">
                <input class="layui-input" name="pptime" id="test2" type="text" placeholder="选择日期">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单位名称</label>
            <div class="layui-input-block">
                <input type="text" name="unitname" class="layui-input" lay-verify="required" utocomplete="off">
                <input type="hidden" name="id" class="layui-input" lay-verify="required" utocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">充值金额</label>
            <div class="layui-input-block">
                <input type="text" name="sum" class="layui-input" lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update-user-form-submit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 页面JS -->
<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function() {
        // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        // 显示所有用户
        table.render({
            id:'id',
            elem: '#user-tbl',
            url: 'record/selectAll',
            method: 'get',
            height : 'full-162',
            //totalRow: true,
            cols: [[
                {field: 'id', title: '序号',width: 180,align:"center",hide:true},
                {field: 'pptime', title: '充值时间',width: 220,align:"center",templet(row){
                        var lw = new Date(row.pptime);
                        var lastY = lw.getFullYear();
                        var lastM = lw.getMonth()+1;
                        var lastD = lw.getDate();
                        var startdate=lastY+"-"+(lastM<10 ? "0" + lastM : lastM)+"-"+(lastD<10 ? "0"+ lastD : lastD);
                        return startdate;
                    }},
                {field: 'unitname', title: '单位名称',width: 400,align:"center"},
                {field: 'sum', title: '充值金额',width: 200,align:"center"},
                // {fixed: 'right', title: '操作', toolbar: '#user-tbl-toolbar', width: 200,align:"center"}
            ]
        ]
            // 表格容器id，用于表格重载
            , limit: 12
            ,limits: [12,25,35]
            ,id: 'user-tbl'
            ,page: true
        });
        <!--多条件查询-->
        $("#ss").on('click',function () {
            var unitname=$("#dname").val();

            // 显示所有用户
            table.render({
                elem: '#user-tbl',
                url: 'record/selectAllSB/'+unitname,
                method: 'get',
                height : 'full-162',
                cols: [[
                    {field: 'id', title: '序号',width: 250,align:"center",hide:true},
                    {field: 'pptime', title: '充值时间',width: 220,align:"center",templet(row){
                            var lw = new Date(row.pptime);
                            var lastY = lw.getFullYear();
                            var lastM = lw.getMonth()+1;
                            var lastD = lw.getDate();
                            var startdate=lastY+"-"+(lastM<10 ? "0" + lastM : lastM)+"-"+(lastD<10 ? "0"+ lastD : lastD);
                            return startdate;
                        }},
                    {field: 'unitname', title: '单位名称',width: 600,align:"center"},
                    {field: 'sum', title: '充值金额',width: 350,align:"center"},
                    // {fixed: 'right', title: '操作', toolbar: '#user-tbl-toolbar', width: 200,align:"center"}
                ]
                ]
                // 表格容器id，用于表格重载
                , limit: 12
                ,limits: [12,25,35]
                ,id: 'user-tbl'
                ,page: true
            });
        })
        // 显示添加用户弹出层
        $('#add-user-btn').click(function() {
            // 每次显示前重置表单
            $('#add-user-form')[0].reset();
            layer.open({
                type: 1,
                title: '添加',
                skin: 'layui-layer-molv',
                area: ['500px','600px'],
                content: $('#add-user-layer')
            });
        });

        // 添加用户表单提交
        form.on('submit(add-user-form-submit)', function(data) {
            // ajax方式添加用户
            $.ajax({
                url: "record/addRecord",
                type: "POST",
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    if (data.msg == 'ok') {
                        layer.close(layer.index);
                        layer.msg('添加成功');
                        table.reload('user-tbl');
                    } else {
                        layer.msg('添加失败');
                    }
                },
                error: function() {
                    console.log("ajax error");
                }
            });
            // 阻止表单跳转
            return false;
        });

        // 监听行工具栏事件：删除用户与更新用户
        table.on('tool(user-tbl)', function(obj) {
            // 获取当前行数据和lay-event的值
            var data = obj.data;
            var event = obj.event;

            // 删除用户事件
            if (event === 'deleteUser') {
                layer.confirm('确定删除吗？', function(index) {
                    // ajax方式删除用户
                    $.ajax({
                        url: 'record/deleteById/' + data.id,
                        type: "DELETE",
                        dataType: 'json',
                        success: function(data) {
                            if (data.msg == 'ok') {
                                layer.msg('删除成功');
                                table.reload('user-tbl');
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function() {
                            console.log("ajax error");
                        }
                    });
                    layer.close(index);
                });
            }

            // 更新用户事件
            if (event === 'updateUser') {
                // 每次显示更新用户的表单前自动为表单填写该行的数据
                for(let key in data){
                    let elements = $(`#update-user-form input[name=${key}]`)
                    if(elements?.length > 0){
                        elements[0].value = data[key]
                    }
                }

                layer.open({
                    type: 1,
                    title: '更新',
                    skin: 'layui-layer-molv',
                    area: ['500px','600px'],
                    content: $('#update-user-layer')
                });
                // 更新用户表单提交
                form.on('submit(update-user-form-submit)', function(data) {
                    // ajax方式更新用户
                    $.ajax({
                        url: "record/updateById",
                        type: "PUT",
                        data: JSON.stringify(data.field),
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function(data) {
                            if (data.msg == 'ok') {
                                layer.close(layer.index);
                                layer.msg('更新成功');
                                table.reload('user-tbl');
                            } else {
                                layer.msg('更新失败');
                            }
                        },
                        error: function() {
                            console.log("ajax error");
                        }
                    });
                    // 阻止表单跳转
                    return false;
                });
            }
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test2'
        });
    });
</script>
<!--日期-->
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1'
        });
    });
</script>
</body>

</html>